<template>
  <div class="container">
    <div v-if="!cardFlag" class="card-not-bind" @click="handleBindCard">
      <img src="../assets/me/add_card.png" alt="#" />
      <p>添加银行卡</p>
    </div>
    <div class="card-bind" v-else>
      <div class="info">
        <div class="card-name">
          <img v-if="binkCardInfo.bank_logo_url" :src="binkCardInfo.bank_logo_url" alt />
          <img v-else src="../assets/yinglian.png" alt />
          <p>
            {{binkCardInfo.parentBankName}}
            <span
              v-show="binkCardInfo.card_type"
            >{{binkCardInfo.card_type}}</span>
          </p>
        </div>

        <div class="text">
          <span>{{showCard1}}</span>
          <span>****</span>
          <span>****</span>
          <span>{{showCard2}}</span>
        </div>
      </div>
      <div class="btn" @click="handleReadCard">解绑银行卡</div>
    </div>
  </div>
</template>

<script>
import { checkBankCard } from "@/api/rechargeWithDrawal";
export default {
  data() {
    return {
      type: "",
      // 银行卡信息
      binkCardInfo: {
        cardType: "",
        ystMobile: "",
        parentBankName: "",
        bank_logo_url: ""
      },
      showCard1: "",
      showCard2: "",
      cardFlag: false
    };
  },
  created() {
    this.type = this.$route.query.type;
    console.log(this.type);
    this._checkBankCard();
  },
  methods: {
    // 检测和得到绑定银行卡信息（个人OR法人）
    _checkBankCard() {
      checkBankCard().then(res => {
        console.log("检测绑定银行卡信息", res);
        if (res.code == 1) {
          if (res.data) {
            if (res.data.cardType) {
              this.cardFlag = true;
              this.showCard1 = res.data.cardType.substring(0, 4);
              let disLength = res.data.cardType.length;
              this.showCard2 = res.data.cardType.substring(
                disLength - 4,
                disLength
              );
              this.binkCardInfo.cardType = res.data.cardType;
              this.binkCardInfo.parentBankName = res.data.parentBankName;
              this.binkCardInfo.ystMobile = res.data.ystMobile;
              this.binkCardInfo.bank_logo_url = res.data.bank_logo_url;
              localStorage.setItem(
                "binkCardInfo",
                JSON.stringify(this.binkCardInfo)
              );
            }
          }
        } else {
          this.cardFlag = false;
          console.log(res.msg);
        }

        // console.log("银行卡信息", this.binkCardInfo);
      });
    },
    // 绑定银行卡

    handleBindCard() {
      this.$router.push({
        path: "bind_card"
      });
    },
    // 查看银行卡
    handleReadCard() {
      this.$router.push({
        path: "/un_bind_card"
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  padding: 30px;
  background-color: #f7f7f7;
  > .card-not-bind {
    width: 100%;
    padding: 87px 0;
    background-color: #fff;
    border-radius: 8px;
    font-size: 28px;
    font-weight: 400;
    color: rgba(254, 96, 24, 1);
    > img {
      width: 40px;
      height: 40px;
      margin-bottom: 20px;
    }
  }
  > .card-bind {
    width: 100%;
    background-color: #fff;
    > .info {
      text-align: left;
      padding: 40px 40px 50px 40px;
      border-bottom: 1px solid #f2f2f2;

      .card-name {
        position: relative;
        img {
          width: 60px;
          height: 60px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        > p {
          display: flex;
          align-items: center;
          font-size: 30px;
          font-weight: 400;
          color: rgba(17, 17, 17, 1);
          margin-bottom: 50px;
          margin-left: 73px;
          > span {
            display: block;
            width: 72px;
            height: 32px;
            margin-left: 8px;
            line-height: 32px;
            background: rgba(235, 242, 255, 1);
            border-radius: 2px;
            font-size: 22px;
            font-weight: 400;
            color: rgba(56, 126, 255, 1);
          }
        }
      }

      > .text {
        display: flex;
        justify-content: space-between;
        font-size: 46px;
        font-weight: 500;
        color: rgba(17, 17, 17, 1);
      }
    }
    > .btn {
      padding: 30px 0;
      font-size: 28px;
      font-weight: 400;
      color: rgba(254, 96, 24, 1);
    }
  }
}
</style>
